<template>
  <div class="MarketActivityDetail-container">
    <el-form
      ref="activityDetailFormRef"
      style="width: 100%"
      :model="activityDetail"
      label-width="100px"
      :rules="rules"
    >
      <el-form-item label="ID">
        {{ activityDetail.id }}
      </el-form-item>
      <el-form-item label="负责人">
        {{ activityDetail.ownerDO?.name }}
      </el-form-item>
      <el-form-item label="活动名称">
        {{ activityDetail.name }}
      </el-form-item>
      <el-form-item label="姓名">
        {{ activityDetail.name }}
      </el-form-item>
      <el-form-item label="开始时间">
        {{ activityDetail.startTime }}
      </el-form-item>
      <el-form-item label="结束时间">
        {{ activityDetail.endTime }}
      </el-form-item>
      <el-form-item label="活动预算">
        {{ activityDetail.cost }}
      </el-form-item>
      <el-form-item label="活动描述">
        {{ activityDetail.description }}
      </el-form-item>
      <el-form-item label="创建时间">
        {{ activityDetail.createTime }}
      </el-form-item>
      <el-form-item label="创建人">
        {{ activityDetail.createDO?.name }}
      </el-form-item>
      <el-form-item label="编辑时间">
        {{ activityDetail.editTime }}
      </el-form-item>
      <el-form-item label="编辑人">
        {{ activityDetail.editDO?.name }}
      </el-form-item>
      <el-form-item label="填写备注" prop="noteContent">
        <el-input
          type="textarea"
          v-model="activityDetail.noteContent"
          placeholder="请输入活动备注"
          :rows="8"
          clearable
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="addNoteContent(activityDetailFormRef)">提 交</el-button>
        <el-button type="primary" @click="goBack" plain>返 回</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="activityRemarkList" style="width: 100%; margin-top: 12px">
      <el-table-column type="index" label="序号" width="120" />
      <el-table-column prop="noteContent" label="备注内容" width="120" show-overflow-tooltip />
      <el-table-column prop="createTime" label="备注时间" width="120" show-overflow-tooltip />
      <el-table-column label="备注人" show-overflow-tooltip>
        <template #default="scope">
          {{ scope.row.createByDO?.name }}
        </template>
      </el-table-column>
      <el-table-column prop="editTime" label="编辑时间" show-overflow-tooltip />
      <el-table-column label="编辑人" show-overflow-tooltip>
        <template #default="scope">
          {{ scope.row.editByDO?.name }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作">
        <template #default="scope">
          <el-button type="primary" size="small" @click="handleEdit(scope.row.id)">
            编辑
          </el-button>
          <el-button size="small" type="danger" @click="handleDelete(scope.row.id)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      v-if="total"
      background
      layout="prev, pager, next"
      :page-size="pageSize"
      :total="total"
      class="pagination"
      @change="pageChange"
      @prev-click="toPage"
      @next-click="toPage"
    />
  </div>
</template>

<script setup lang="ts" name="MarketActivityDetail">
import { onMounted, reactive, ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import type { FormInstance, FormRules } from 'element-plus'
import httpRequest from '@/http/httpRequest'

// type Props = {}
// defineProps<Props>()
// const emit = defineEmits([])
const router = useRouter()
const route = useRoute()
let total = ref(0)
let pageSize = ref(10)
interface IActivityDetail {
  id: number | null
  ownerId: number | null
  name: string | null
  startTime: string | null
  endTime: string | null
  cost: number | null
  description: string | null
  createTime: string | null
  createBy: string | null
  editTime: string | null
  editBy: string | null
  ownerDO: IUserDO | null
  createDO: IUserDO | null
  editDO: IUserDO | null
  noteContent: string | null
}
interface IUserDO {
  id: number | null
  name: string | null
}
let activityDetail = reactive<IActivityDetail>({
  id: null,
  ownerId: null,
  name: null,
  startTime: null,
  endTime: null,
  cost: null,
  description: null,
  createTime: null,
  createBy: null,
  editTime: null,
  editBy: null,
  ownerDO: null,
  createDO: null,
  editDO: null,
  noteContent: null,
})
const goBack = () => {
  router.go(-1)
}
const activityDetailFormRef = ref<FormInstance>()
const rules = reactive<FormRules<IActivityDetail>>({
  noteContent: [{ required: true, message: '活动备注不能为空', trigger: 'blur' }],
})

let { id } = route.params

const getActivityDetail = () => {
  httpRequest
    .doGet('/api/activity/' + id, {})
    .then((res) => {
      if (res.data.code == 200) {
        Object.assign(activityDetail, res.data.data)
      }
    })
    .catch((error) => {})
}

const getActivityRemarkList = (currentPage: number, pageSize: number = 10) => {
  httpRequest
    .doGet('/api/activity/remark', {
      currentPage: currentPage,
      pageSize: pageSize,
      activityId: id,
    })
    .then((res) => {
      if (res.data.code == 200) {
        activityRemarkList.value = res.data.data.list
        total.value = res.data.data.total
      }
    })
    .catch((error) => {})
}
onMounted(() => {
  getActivityDetail()
  getActivityRemarkList(1)
})

const addNoteContent = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      httpRequest
        .doPost('/api/activity/remark', {
          activityId: id,
          noteContent: activityDetail.noteContent,
        })
        .then((res) => {
          if (res.data.code == 200) {
            //新增成功
            getActivityRemarkList(1)
            activityDetail.noteContent = ''
          }
        })
        .catch((error) => {})
    }
  })
}

interface IActivityRemarkDetail {
  id: number | null
  activityId: number | null
  noteContent: number | null
  createTime: number | null
  createBy: number | null
  editTime: number | null
  editBy: number | null
  createByDO: IUser | null
  editByDO: IUser | null
}

interface IUser {
  id: number | null
  name: string | null
}
let activityRemarkList = ref<IActivityRemarkDetail[]>([])

const handleEdit = (id: number) => {
  // httpRequest
  //   .doGet('/api/user/' + userId, {})
  //   .then((res) => {
  //     if (res.data.code == 200) {
  //       //userAddForm赋值
  //       // userAddForm
  //       userAddDialogFormVisible.value = true
  //     } else {
  //     }
  //   })
  //   .catch((error) => {})
}
const handleDelete = (id: number) => {
  httpRequest
    .doDelete('/api/activity/remark/' + id, {})
    .then((res) => {
      if (res.data.code == 200) {
        //删除成功
      }
    })
    .catch((error) => {})
}
let pageChange = (currentPage: number, pageSize: number) => {
  getActivityRemarkList(currentPage, pageSize)
}

let toPage = (currentPage: number) => {
  getActivityRemarkList(currentPage, pageSize.value)
}
</script>

<style scoped lang="scss">
.MarketActivityDetail-container {
  min-height: 100%;
}
</style>
